<template>
  <div class="cell-storage-form">
    <h2>最近操作记录</h2>

    <!-- 筛选条件 -->
    <div class="filter-bar">
      <div class="filter-item">
        <label>操作类型</label>
        <select v-model="filters.operationType">
          <option value="">全部</option>
          <option value="entry">录入</option>
          <option value="outbound">出库</option>
          <option value="modify">修改</option>
        </select>
      </div>

      <div class="filter-item">
        <label>操作人</label>
        <input
          type="text"
          v-model="filters.operator"
          placeholder="输入操作人"
        >
      </div>

      <div class="filter-item">
        <label>日期范围</label>
        <input
          type="date"
          v-model="filters.startDate"
        >
        <span>至</span>
        <input
          type="date"
          v-model="filters.endDate"
        >
      </div>

      <div class="filter-item">
        <button @click="searchOperations" class="btn-search">
          <i class="el-icon-search"></i> 查询
        </button>
      </div>
    </div>

    <!-- 数据表格 -->
    <table class="storage-table">
      <thead>
        <tr>
          <th @click="sortBy('operation_time')">
            操作时间
            <span v-if="sortField === 'operation_time'">
              {{ sortOrder === 'asc' ? '↑' : '↓' }}
            </span>
          </th>
          <th @click="sortBy('operation_type')">
            操作类型
            <span v-if="sortField === 'operation_type'">
              {{ sortOrder === 'asc' ? '↑' : '↓' }}
            </span>
          </th>
          <th>细胞编号</th>
          <th>细胞名称</th>
          <th @click="sortBy('operator')">
            操作人
            <span v-if="sortField === 'operator'">
              {{ sortOrder === 'asc' ? '↑' : '↓' }}
            </span>
          </th>
          <th>操作详情</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in paginatedData" :key="record.id">
          <td>{{ formatDate(record.operation_time) }}</td>
          <td>
            <span :class="'operation-type-' + record.operation_type">
              {{ getOperationTypeName(record.operation_type) }}
            </span>
          </td>
          <td>{{ record.sample_id }}</td>
          <td>{{ record.cell_name }}</td>
          <td>{{ record.operator }}</td>
          <td>{{ record.details }}</td>
        </tr>
      </tbody>
    </table>

    <!-- 分页 -->
    <div class="pagination">
      <span>每页显示：</span>
      <select v-model="pagination.pageSize" @change="handleSizeChange">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
      </select>
      <button
        @click="prevPage"
        :disabled="pagination.currentPage === 1"
        class="btn-page"
      >
        上一页
      </button>
      <span>当前页：{{ pagination.currentPage }}</span>
      <button
        @click="nextPage"
        :disabled="pagination.currentPage >= pagination.totalPages"
        class="btn-page"
      >
        下一页
      </button>
      <span>共 {{ pagination.total }} 条记录</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 在 OperationHistory.vue 的 data() 中替换 operations 数组
      operations: [
        {
          id: 1,
          operation_time: '2023-05-20T14:30:00Z',
          operation_type: 'outbound',
          sample_id: 'S20230005',
          cell_name: 'Hela-005',
          operator: '张研究员',
          details: '出库 2 个用于药物筛选实验',
          quantity: 2,
          receiver: '李博士',
          purpose: '药物筛选实验'
        },
        {
          id: 2,
          operation_time: '2023-05-18T16:50:00Z',
          operation_type: 'entry',
          sample_id: 'S20230004',
          cell_name: 'HEK293T-004',
          operator: '王技术员',
          details: '新增细胞入库，数量 12 个',
          quantity: 12
        },
        {
          id: 3,
          operation_time: '2023-05-15T11:25:00Z',
          operation_type: 'modify',
          sample_id: 'S20230003',
          cell_name: 'iPSC-HDF-003',
          operator: '张研究员',
          details: '更新细胞数量从 15 到 20',
          old_quantity: 15,
          new_quantity: 20
        },
        {
          id: 4,
          operation_time: '2023-05-12T14:20:00Z',
          operation_type: 'entry',
          sample_id: 'S20230002',
          cell_name: 'NK-2023-002',
          operator: '李技术员',
          details: '新增细胞入库，数量 10 个',
          quantity: 10
        },
        {
          id: 5,
          operation_time: '2023-05-10T09:35:00Z',
          operation_type: 'entry',
          sample_id: 'S20230001',
          cell_name: 'UC-MSC-001',
          operator: '王技术员',
          details: '新增细胞入库，数量 15 个',
          quantity: 15
        },
        {
          id: 6,
          operation_time: '2023-05-08T13:15:00Z',
          operation_type: 'outbound',
          sample_id: 'S20230000',
          cell_name: 'Jurkat-000',
          operator: '张研究员',
          details: '出库 5 个用于免疫治疗研究',
          quantity: 5,
          receiver: '陈教授',
          purpose: '免疫治疗研究'
        },
        {
          id: 7,
          operation_time: '2023-05-05T10:45:00Z',
          operation_type: 'modify',
          sample_id: 'S20220099',
          cell_name: 'HUVEC-099',
          operator: '李技术员',
          details: '更新存储位置从 B区-2层-01柜 到 B区-2层-03柜',
          old_location: 'B区-2层-01柜-抽屉1-箱1-(1,1)',
          new_location: 'B区-2层-03柜-抽屉1-箱1-(1,1)'
        }
      ],
      filters: {
        operationType: '',
        operator: '',
        startDate: '',
        endDate: ''
      },
      sortField: 'operation_time',
      sortOrder: 'desc',
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 7,
        totalPages: 1
      }
    }
  },
  computed: {
    paginatedData () {
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const end = start + this.pagination.pageSize
      return this.operations.slice(start, end)
    }
  },
  methods: {
    async searchOperations () {
      try {
        const params = {
          page: this.pagination.currentPage,
          page_size: this.pagination.pageSize,
          ordering: this.sortOrder === 'asc' ? this.sortField : `-${this.sortField}`
        }

        if (this.filters.operationType) {
          params.operation_type = this.filters.operationType
        }

        if (this.filters.operator) {
          params.operator = this.filters.operator
        }

        if (this.filters.startDate) {
          params.start_date = this.filters.startDate
        }

        if (this.filters.endDate) {
          params.end_date = this.filters.endDate
        }

        const res = await this.$api.get('/api/operation-logs/', { params })
        this.operations = res.data.results
        this.pagination.total = res.data.count
        this.pagination.totalPages = Math.ceil(res.data.count / this.pagination.pageSize)
      } catch (error) {
        console.error('获取操作记录失败:', error)
      }
    },
    sortBy (field) {
      if (this.sortField === field) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortField = field
        this.sortOrder = 'asc'
      }
      this.searchOperations()
    },
    getOperationTypeName (type) {
      const types = {
        entry: '录入',
        outbound: '出库',
        modify: '修改'
      }
      return types[type] || type
    },
    formatDate (dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString()
    },
    prevPage () {
      if (this.pagination.currentPage > 1) {
        this.pagination.currentPage--
        this.searchOperations()
      }
    },
    nextPage () {
      if (this.pagination.currentPage < this.pagination.totalPages) {
        this.pagination.currentPage++
        this.searchOperations()
      }
    },
    handleSizeChange () {
      this.pagination.currentPage = 1
      this.searchOperations()
    }
  },
  mounted () {
    this.searchOperations()
  }
}
</script>

<style scoped>
.cell-storage-form {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 24px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}

.filter-item label {
  min-width: 70px;
  font-weight: 500;
  white-space: nowrap;
}

.filter-item select,
.filter-item input[type="text"],
.filter-item input[type="date"] {
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  flex: 1;
  min-width: 120px;
}

.btn-search {
  padding: 6px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-search:hover {
  background-color: #0069d9;
}

.storage-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.storage-table thead {
  background-color: #f1f3f5;
}

.storage-table th,
.storage-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

.storage-table th {
  cursor: pointer;
  user-select: none;
}

.storage-table th:hover {
  background-color: #e9ecef;
}

.storage-table tbody tr:hover {
  background-color: #f8f9fa;
}

.operation-type-entry {
  color: #28a745;
  font-weight: bold;
}

.operation-type-outbound {
  color: #dc3545;
  font-weight: bold;
}

.operation-type-modify {
  color: #007bff;
  font-weight: bold;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.pagination select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ced4da;
}

.btn-page {
  padding: 6px 12px;
  border: 1px solid #ced4da;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-page:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
